<template>
	<view style="clear: both;">		
		<view class="nxc-item" v-for="(item, index) in list" :key="item.id"  >
			<view style="width: ;"></view>
			<view class="item">
				<view class="content" :style="{borderLeft: '2px '+color+' solid'}">					
					{{item.nickname}}<text class="radius margin-right-xs bg-red" style="font-size: 11px ;">{{item.type == null?'':(item.is_vip==1?'会员':'')}}</text>
				</view>									
				<view class="action" @tap="checkitem(index)">
					<text style="border: 1px solid red;border-radius: 3px;color: red;font-size: 24rpx;padding: 0 5px;">下级{{item.childlist.length}}人</text>
					<text :class="!item.checked?'wlIcon-sanjiao3':'wlIcon-sanjiao1'" style="float: right;margin-top: 3px;color: #888888;"></text>
				</view>
				 
				<!-- #ifdef MP-WEIXIN -->
				<list v-if="item.childlist && item.childlist.length" v-show="item.checked != undefined && item.checked == true" :color="colorList[Math.floor(Math.random() * 4)]"  :list="item.childlist" />
		        <!-- #endif -->	 
				<!-- #ifndef MP-WEIXIN -->
				<recursive-list v-if="item.childlist && item.childlist.length" v-show="item.checked != undefined && item.checked == true" :color="colorList[Math.floor(Math.random() * 4)]"  :list="item.childlist" />
				<!-- #endif -->	 
			</view>					
		</view>
	</view>
   
</template>
 
<script>
import list from '@/components/recursiveList/recursiveList.vue';	
export default {
  name: 'recursiveList',
  components: {list},
  props: {
    list: Array,
	color:String
  },
  data() {
  	return {
  		type: {
  			0: '否',
  			1: '是'
  		},
		colorList:{
			0:'#0334F7',
			1:'#F70590',
			2:'#0390F2',
			3:'#0AEA05',
			4:'#ED6A05'
		}
  	};
  },
  methods: {
  	checkitem(index){
		
  		if(this.list[index].checked == undefined || this.list[index].checked == false)this.list[index].checked = true;
  		else this.list[index].checked = false;
		
		this.$forceUpdate();
  	}
  }
}
</script>
<style>
.main{
		width: 100%;height: 100#;background-color: #E3E8F7;margin-top: -30rpx;padding:24rpx;padding-top: 60rpx;
	}
	.nxc-item .item{
		margin: 20rpx 0;
		background-color: white;
		border-radius: 6px;
		padding: 10rpx;
		font-size: 32rpx;
		position: relative;
		
	}
	
	.nxc-item .item .content{		
		line-height: 40rpx;
		padding: 18rpx 20rpx;
		position: relative;
	}
/* 	.nxc-item .itme .content .fd{
		width: calc(750rpx - 100%);
		height: 100%;
		position: absolute;
		left: -calc(750rpx - 100%);
		top:0
		
	} */
	.nxc-item .item .action{
		position: absolute;
		right: 10px;
		top: 30rpx;
	}
	
</style>